<template>
  <Panel bottom class="tankbel">
    <div class="flex justify-between items-center">
      <div class="title" @click="changeSelect">{{ obj.gtid }} - {{ obj.cglx }}</div>
      <div class="flex gap-[30px]">
        <div class="level">一级</div>
        <!-- <div class="text-white text-[20px] mr-[10px] mt-[5px] bg-transparent cursor-pointer font-bold" style="border: 0;" @click="handleClick">X
        </div> -->
      </div>
    </div>
    <div class="flex" style="height: 85%; padding: 5px">
      <div class="left">
        <div style="font-size: 18px">{{ obj.cglx.slice(0, 2) }}</div>
        <div class="box">
          <img src="@/assets/image/guanti.png" alt="" />
          <div class="centerText">{{ obj.sjyj }}m³</div>
        </div>
        <div class="leftText">H:{{ obj.cggd }}m</div>
        <div>L:{{ obj.cgzj }}m</div>
      </div>
      <div class="right flex-col">
        <div style="color: yellow; font-size: 24px; height: 20px">{{ obj.ccjz }}</div>
        <div class="imgBox flex-1 flex flex-row items-center">
          <div v-for="(item, index) in obj.msdsXx.tbxx" :key="index" class="text-center mr-[10px]">
            <img :src="item.tbdz" style="display: inline-block; object-fit: contain" alt="" />
            <div class="text-white">{{ item.lx }}</div>
          </div>
          <!-- <div>
            <img src="@/assets/image/dangerTank.png" alt="">
            <div>有毒</div>
          </div>
          <div>
            <img src="@/assets/image/dangerTank.png" alt="">
            <div>易腐蚀</div>
          </div>
          <div>
            <img src="@/assets/image/dangerTank.png" alt="">
            <div>易燃易爆</div>
          </div> -->
        </div>
      </div>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import { closeInfoWindow, replaceInfoWindow, openInfoWindow } from '@/utils'
import TankLabel from './TankLabel.vue'
import { useBusinessStore } from '@/store'
import Sign from '@/components/common/Sign.vue'
import { queryStxx } from '@/service'
import { stringify } from 'querystring'

const store = useBusinessStore()
// watch(() => store.StorageTankInfo, (newVal, oldValue) => {
//   obj.value = newVal
// }, { immediate: true })
const obj: any = ref()

const domName: any = inject('domName')
const attribute: any = inject('attribute')
const tabInfoAttribute: any = inject('tabInfoAttribute')
console.log('=============>', tabInfoAttribute)

const overlayName: any = inject('overlayName')
const qyId: any = inject('qyId')
obj.value = attribute

const handleClick = () => {
  window.GOverlay.removeByName(overlayName)
  const data = store.StorageTankInfoAttirbute as any
  openInfoWindow(data.wzxx, Sign, data, { jqId: qyId })
}
const changeSelect = () => {
  store.tabId = 7
  store.currentTab = 'CurrenComp'
  store.currentTabName = '储罐'
  store.currentID = 9
  queryStxx({
    bzbh: tabInfoAttribute.bzbh,
    bzmc: tabInfoAttribute.bzmc,
    qyId: qyId,
    yslx: tabInfoAttribute.yslx,
  }).then((res: any) => {
    store.StorageTankInfo = res?.obj
    store.StorageMxxxInfo = res?.mxxxInfo
    store.StorageTankInfoAttirbute = tabInfoAttribute
    store.isBigLabel = false
  })
}
</script>
<style lang="less" scoped>
.tankbel {
  width: 560px;
  height: 280px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 50%;
  right: -140%;

  .title {
    height: 50px;
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
    padding: 5px 10px;
  }

  .level {
    width: 50px;
    height: 28px;
    line-height: 28px;
    background: rgba(255, 51, 51, 0.4);
    color: #fff;
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    border-bottom: 3px solid rgba(255, 51, 51, 0.4);
  }

  .left {
    width: 35%;
    height: 100%;
    margin-right: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #00ffff;
    position: relative;

    .box {
      position: relative;

      .centerText {
        font-size: 20px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        position: absolute;
        top: 50%;
        left: 28%;
      }
    }

    .leftText {
      position: absolute;
      top: 40%;
      left: 5px;
    }

    img {
      border: none;
      width: 86px;
      height: 104px;
      margin: auto;
    }
  }

  .right {
    display: flex;
    width: 65%;
    height: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);

    .imgBox {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      text-align: center;
      color: #fff;
      font-size: 16px;

      img {
        width: 85px;
        height: 71px;
        border: none;
      }
    }
  }
}
</style>
